<template>
  <div class="chit-query-root">
    <div class="query-con">
      <el-input clearable :placeholder="placeholder" @clear="clear" v-model="queryParam">
        <template slot="prepend">
          <div class="img-con">
            <img src="@/assets/images/chit/chitQuery.png"/>
          </div>
        </template>

        <template slot="append">
          <div class="query-bt">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          </div>
        </template>
      </el-input>
    </div>

    <div class="list-con" v-show="currentShow != null && currentShow !== ''">

      <chit-list @showChitGeometry="showPlot" @showDisasterGeometry="showDisasterGeometry"
                 @goChitInfo="goChitInfo" :query-param="chitQueryParam"
                 @goDetail="goDetail" :list-data="chitListData"
                 v-show="currentShow == CHIT_QUERY_SHOW_TYPE.CHIT_LIST"></chit-list>

      <detail-list @showPlot="showPlot" @goChitInfo="goChitInfo" :chit-data="currentChitData" @goInfo="goInfo"
                   @goBack="goBack"
                   :list-data="chitDetailListData"
                   v-show="currentShow == CHIT_QUERY_SHOW_TYPE.CHIT_DETAIL"></detail-list>

      <info @goChitInfo="goChitInfo" :chit-data="currentChitData" @goBack="goBack" :info-data="infoData"
            v-show="currentShow == CHIT_QUERY_SHOW_TYPE.INFO"></info>
    </div>
  </div>
</template>

<script>
import {pageBaseMapMixins} from "@/mixins/pageBaseMapMixins";
import {CHIT_QUERY_SHOW_TYPE, GEOMETRY_TYPE} from "@/constantData";
import ChitList from "@/views/chitLook/components/chitQuery/chitList.vue";
import DetailList from "@/views/chitLook/components/chitQuery/detailList.vue";
import Info from '@/views/chitLook/components/chitQuery/info.vue'
import {isArr} from "@/utils/arrayUtil";
import {chitSubPageMixins} from "@/views/chit/mixins/chitSubPageMixins";

export default {
  mixins: [pageBaseMapMixins, chitSubPageMixins],
  components: {
    ChitList,
    DetailList,
    Info
  },
  props: {
    placeholder: {
      type: String,
      default: '请输入保险单号码/农户名称'
    },
    onlyQuery: {
      type: Boolean,
      default: false
    },
    baseMap: {
      type: Object, default: () => {
      }
    }
  },
  data() {
    return {
      CHIT_QUERY_SHOW_TYPE,
      showListFlag: false,
      showList: [],
      chitListData: [],
      chitDetailListData: [],
      infoData: {},
      queryParam: null,
      chitQueryParam: null,

      currentChitData: null,
      chitLayerId: 'chitLayerId',
      disasterLayerId: 'disasterLayerId'
    }
  },
  computed: {
    currentShow() {
      let {showList} = this
      return isArr(showList) ? showList.at(-1) : ''
    }
  },
  methods: {
    async showDisasterGeometry(plotData) {
      let source = plotData.map(item => {
        let {tbr: TBR, pfm: PFM, mu: MU, szdj: SZDJ, dkmc: DKMC, zzsx: ZZSX, rings,} = item;
        return {
          attributes: {TBR, PFM, MU, SZDJ, DKMC, ZZSX,},
          geometry: {
            rings,
            type: GEOMETRY_TYPE.POLYGON,
            spatialReference: {
              wkid: 4490
            }
          }
        }
      })
      let owner = this
      const geometryType = GEOMETRY_TYPE.POLYGON;
      await owner.addLayer({
        layerId: owner.disasterLayerId,
        source,
        rendererSymbol: {
          type: "simple-fill",
          color: [255, 0, 0, 0.1],
          outline: {
            color: [255, 0, 0, 1],
            width: 2
          }
        },
        geometryType,
        txtFileList: [
          {
            value: 'TBR',
            label: '投保人',
            addToMap: false,
          },
          {
            value: 'PFM',
            label: '面积(平方米)',
            addToMap: false,
          },
          {
            value: 'MU',
            label: '面积(亩)',
            addToMap: false,
          },
          {
            value: 'SZDJ',
            label: '受灾等级',
            addToMap: false,
          },
          {
            value: 'DKMC',
            label: '地块名称',
            addToMap: false,
          },
          {
            value: 'ZZSX',
            label: '种植属性',
            addToMap: false,
          },
        ],
        txtColor: '#fff',
        fontSize: 15
      })
      await owner.locationByWhere({
        layerId: owner.disasterLayerId,
        openPopupFlag: true,
        popupTitle: '受灾信息',
        where: '1=1'
      })
    },
    goChitInfo(data) {
      this.$router.push({path: '/chit/chitInfo', query: {chitId: data.id}})
    },
    setFormData(data) {
      this.showList = [CHIT_QUERY_SHOW_TYPE.CHIT_LIST]
      this.chitListData = [data]
    },
    initMonitor() {
      this.openMonitor({layerId: this.chitLayerId, backFun: this.setChitFeature})
      this.openMonitor({layerId: this.disasterLayerId, backFun: this.setDisasterFeature})
    },
    setChitFeature({point, layer, features}) {
      const popupTitle = '保单信息'
      this.locationByFeatures({layerId: layer.id, features, openPopupFlag: true, popupTitle, point})
    },
    setDisasterFeature({point, layer, features}) {
      const popupTitle = '受灾信息'
      this.locationByFeatures({layerId: layer.id, features, openPopupFlag: true, popupTitle, point})
    },
    handleQuery() {
      if (this.onlyQuery) {
        this.$emit('query', this.queryParam)
        return
      }
      this.showList = [CHIT_QUERY_SHOW_TYPE.CHIT_LIST]
      this.chitQueryParam = this.queryParam
    },
    goDetail(data, type) {
      this.currentChitData = data
      this.clearPlot()
      this.showList.push(type)
    },
    goInfo(data, type) {
      this.infoData = data
      this.showList.push(type)
    },
    goBack() {
      let length = this.showList.length
      this.showList = _.cloneDeep(this.showList).filter((item, index) => {
        return index !== length - 1;
      })
      if (!(this.showList?.length > 1)) {
        this.clearPlot()
      }
    },
    clear() {
      this.showList = []
      this.clearPlot()
    },
    async showPlot(plotData) {
      let source = plotData.map(item => {
        let {a11: A11, a12: A12, a21: A21, a22: A22, cn: CN, r: R, rings, t: T, tc: TC} = item;
        return {
          attributes: {A11, A12, A21, A22, CN, R, T, TC},
          geometry: {
            rings,
            type: GEOMETRY_TYPE.POLYGON,
            spatialReference: {
              wkid: 4490
            }
          }
        }
      })
      let owner = this
      const geometryType = GEOMETRY_TYPE.POLYGON;
      await owner.addLayer({
        layerId: owner.chitLayerId,
        source,
        rendererSymbol: {
          type: "simple-fill",
          color: [255, 255, 0, 0.1],
          outline: {
            color: [255, 255, 0, 1],
            width: 2
          }
        },
        geometryType,
        txtFileList: [
          {
            value: 'R',
            label: '保险人名称',
            addToMap: false,
          },
          {
            value: 'CN',
            label: '身份证/统一社会信用代码',
            addToMap: false,
          },
          {
            value: 'T',
            label: '保险种类',
            addToMap: false,
          },
          {
            value: 'TC',
            label: '保险种类代码',
            addToMap: false,
          },
          {
            value: 'A11',
            label: '面积（平方米）',
            addToMap: false,
          },
          {
            value: 'A12',
            label: '面积（亩）',
            addToMap: false,
          },
          {
            value: 'A21',
            label: '投影面积（平方米）',
            addToMap: false,
          },
          {
            value: 'A22',
            label: '投影面积（亩）',
            addToMap: false,
          },
        ],
        txtColor: '#fff',
        fontSize: 15
      })
      await owner.locationByWhere({
        layerId: owner.chitLayerId,
        openPopupFlag: true,
        popupTitle: '保单信息',
        where: '1=1'
      })
    },
    clearPlot() {
      this.removeRender()
      this.delFeaturesByGeometryAndWhere({layerId: this.disasterChitLayerId, where: '1=1'});
    }
  }
};
</script>

<style lang="scss" scoped>
.chit-query-root {
  position: relative;
  width: 100%;
  height: 100%;


  ::v-deep .el-input {
    .el-input-group__prepend, .el-input-group__append {
      padding: 0;
      border: none;
    }

    .el-input-group__prepend {
      background: #fff;
    }

    .el-input-group__append {
      background: rgba(0, 138, 100, 1);
    }
  }

  .img-con {
    height: 38px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 20px;
      height: 20px;
    }
  }

  .query-bt {
    height: 38px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;

    ::v-deep .el-button {
      color: #fff;
    }
  }

  .list-con {
    position: absolute;
    top: 50px;
    width: 100%;
  }
}
</style>
